<template>
	<view>
		<baseForm :column.sync="column" :button="button" @changeColumn="changeColumn"></baseForm>
		<changeTab :model="changeModel" :status.sync="status" :loadMore.sync="menuInfo.base.loadMore" :pageNum.sync="pageParams.pageNum"></changeTab>
		<text v-if="noData" class="noRecord" v-cloak>无考勤记录</text>
		<view v-else>
			<!-- 缺勤和请假情况 -->
			<menuList :menuInfo="menuInfo" :screenH="screenHeight" @loadMore="addPage" v-if="(status == 1) | (status == 2)"></menuList>
			<!-- 在校和实习情况 -->
			<scroll-view v-else class="listBox" @scrolltolower="lower" scroll-y="true" @scroll="scroll" :style="{ height: screenHeight + 'px' }">
				<view class="list">
					<view class="listInfo" v-for="(item, index) in menuInfo.list" :key="index">
						<!-- <view class="miniTit" v-text="item.teacherName"></view>
						<view>
							<icon class="iconfont iconziyuan"></icon>
							打卡时间：{{ item.attendanceDate | time }}
						</view>
						<view>
							<icon class="iconfont iconziyuan1"></icon>
							打卡位置：{{ item.signLocation }}
						</view> -->
						<view class="miniTit">
						{{item.teacherName}} {{ item.attendanceDate | date }} 星期{{ item.weekDayIndexName }}
						</view>
						<view class="flexBox">
							<view class="clockInfo">
								<view>
									<icon class="iconfont iconziyuan"></icon>
									打卡时间：{{ item.attendanceDate | time }}
								</view>
								<view>
									<icon class="iconfont iconziyuan1"></icon>
									打卡位置：{{ item.signLocation }}
								</view>
							</view>
							<image class="plusCamera" v-show="item.attachments" :src="item.attachments[0].docFileUrl" mode="aspectFit" @click="previewImg(index)"></image>
						</view>
						<text v-if="list.length == 0">无打卡记录</text>
					</view>
				</view>
			</scroll-view>
		</view>
		
	</view>
</template>

<script>
import baseForm from '@/wxcomponents/form/form.vue';
import { format, dectList } from '@/libs/common.js';
import common from '@/libs/login.js';
import userMixins from '@/libs/userMixins.js';
import formMixins from '@/libs/formMixins.js';
import changeTab from '@/wxcomponents/commonLayout/changeTab';
import menuList from '@/wxcomponents/commonLayout/menuList.vue';
import dictMixins from '@/libs/dictMixins.js';
import photoMixins from '@/libs/photoMixins.js';
export default {
	mixins: [userMixins, formMixins, dictMixins, photoMixins],
	data() {
		let self = this;
		return {
			list: '',
			noData: true,
			screenHeight: 530,
			status: 0, //changeTab的状态 0-在校
			button: {
				hide: true
			},
			menuInfo: {
				base: {
					menuProp: ['num', 'name', 'time'],
					tit: ['序号', '姓名', '打卡时间'],
					// class: 'typeOne',
					loadMore: true
				},
				list: []
			},
			column: [
				{
					label: '打卡日期',
					value: format('YY-mm-dd', new Date()),
					required: true,
					name: 'attendanceDate',
					type: 'picker',
					mode: 'date',
					text: format('YY-mm-dd', new Date())
				},
				{
					label: '部门',
					name: 'majorCode',
					type: 'picker',
					required: true,
					disabled: false,
					value: '',
					text: '请选择',
					mode: 'selector', //picker的类型
					async fetchData() {
						//查询专业queryType:2;查询班级queryType:1
						let params = {
							grad: '', //年级
							classCode: '', //班级
							majorCode: '', //专业
							queryType: 2
						};
						let resp = await self.$http.get({
							url: '/oa/department/list'
						});
						console.log(resp);
						this.range = resp.result.map(item => {
							return {
								name: item.deptName,
								value: item.id
							};
						});
						this.range.unshift({name: '全部', value: ''})
					},
					range: []
				}
			],
			changeModel: [{ value: 0, name: '在校' }, { value: 1, name: '缺勤' }, { value: 2, name: '请假' }],
			pageParams: {
				pageNum: 1,
				pageSize: 20
			}
		};
	},
	onLoad() {
		this.column.forEach((item, i) => {
			if (item.fetchData) {
				this.column[i].fetchData();
			}
		});
		this.EventBus.on('columnItemChange', obj => {
			if (obj.key == 'majorCode' || obj.key == 'classCode' || obj.key == 'attendanceDate' || obj.key == 'grade') {
				this.getList();
			}
		});
		this.getList();
	},
	filters: {
		date(value) {
			if (!value) return '';
			let arr = value.split(' ');
			return arr[0];
		},
		time(value) {
			if (!value) return '';
			let arr = value.split(' ');
			return arr[1];
		}
	},
	methods: {
		changeColumn(){
			this.menuInfo.list = []
			this.getList();
			},
		// //年级班级专业联动查询
		// async getInfo(queryType = 2, classCode, majorCode, grade) {
		// 	let params = {
		// 		grade: grade, //年级
		// 		classCode: classCode, //班级
		// 		majorCode: majorCode, //专业
		// 		queryType: queryType
		// 	};
		// 	let resp = await this.$http.post({
		// 		url: '/stu/common/gradeMajorClassList',
		// 		data: params
		// 	});
		// 	return resp;
		// },
		// 加载下一页
		addPage() {
			this.pageParams.pageNum++;
			this.getList();
		},
		lower(e) {
			let that = this;
			if (that.timer) clearTimeout(that.timer);
			that.timer = setTimeout(() => {
				if (this.menuInfo.base.loadMore) {
					this.addPage();
				} else {
					uni.showToast({
						title: '没有更多了',
						icon: 'none'
					});
				}
			}, 500);
		},
		scroll(e) {},
		async getList() {
			let params = {
				attendanceDate: this.column[0].value,
				departmentId: this.column[1].value,
				status: this.status
			};
			let resp = await this.$http.post({
				url: '/stu/studentAttendance/pageTeacher',
				data: { ...params, ...this.pageParams }
			});
			if (resp.code == 0) {
				if (resp.result.rows.length < this.pageParams.pageSize || resp.result.rows.length == 0) {
					this.menuInfo.base.loadMore = false;
				}
				let arr = resp.result.rows.map((item, i) => {
					if (this.status == 0 || this.status == 3) {
						return item;
					} else {
						return {
							// num: i + 1,
							name: item.teacherName,
							// time: item.attendanceDate.substring(0, 10),
							time: '无',
							url: ''
						};
					}
				});
				this.menuInfo.list.push.apply(this.menuInfo.list, arr);
				this.menuInfo.list.forEach((item, i) => {
					this.menuInfo.list[i].num = i + 1;
				});
				this.list = resp.result.rows;
			}
			this.noData = this.menuInfo.list.length == 0;
			this.$forceUpdate()
		}
	},
	components: {
		baseForm,
		changeTab,
		menuList
	},
	watch: {
		status: {
			handler(n) {
				this.menuInfo.list = [];
				this.getList();
			}
		}
	},
	computed: {
		menuInfoList() {
			return this.menuInfo.list;
		}
	}
};
</script>

<style lang="scss" scoped>
	
.flexBox {
	display: flex;
	max-height: 240upx;
	align-items: center;
	.clockInfo {
		flex: 0 1 70%;
	}
	image {
		flex: 0 1 30%;
	}
}
[v-cloak] {
	display: none;
}
.list {
	.listInfo {
		padding: 40upx 30upx;
		border-bottom: 1upx solid #cccccc;

		view {
			line-height: 60upx;
		}

		text {
			display: block;
			width: 100%;
			text-align: center;
		}
	}
}

.noRecord {
	text-align: center;
	font-size: 30upx;
	display: inline-block;
	width: 100%;
}
</style>
